<template>
  <div>
    <a-button
      type="primary"
      icon="download"
      style=" margin:5px  2px"
      @click="clickGetImpor()"
      >导出</a-button
    >
    <a-table
      bordered
      style="padding-top: 10px"
      :rowSelection="rowSelection"
      :columns="columns"
      :dataSource="dataTable"
      :rowKey="(record, index) => record.userId"
      @change="tableChange"
      :pagination="{
        pageSize: form.size,
        total: totalPage,
        hideOnSinglePage: true,
        current: form.page
      }"
    >
      <template slot="avatarUrl" slot-scope="text, record">
        <img
          :src="text"
          v-if="text"
          alt="头像"
          style="width: 60px"
          @click="previewImage({ url: text })"
        />
      </template>
      <template slot="operation" slot-scope="text, row">
        <a-button size="small" type="primary" @click="showTags(row)"
          >内容标签</a-button
        >
        <a-popconfirm
          title="你确定更要删除吗?"
          @confirm="delPlan(row)"
          @cancel="cancel"
          okText="确定"
          cancelText="取消"
        >
          <a-button size="small" type="danger">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
    <!-- 弹框 -->
    <a-modal
      title="内容标签"
      :visible="visibleDetails"
      @cancel="offModel"
      cancelText="关闭"
      okText="确定"
      @ok="handleSubmit"
    >
      <!-- <a-checkbox-group
                    v-model="value"
                    :options="plainOptions"
                    /> -->
      <a-tag
        color="pink"
        style="margin: 5px"
        v-for="(i, index) in valueLabel"
        :key="index"
      >
        {{ i.labelName }}
      </a-tag>
    </a-modal>
    <!-- 导出 -->
    <a-modal
      title="导出数据"
      :visible="visibleImpor"
      cancelText="关闭"
      okText="导出"
      @ok="handleImpor"
      @cancel="visibleImpor = false"
    >
      <a-radio-group v-model="radioImporValue">
        <a-radio :value="1">勾选数据</a-radio>
        <a-radio :value="2">全部数据</a-radio>
      </a-radio-group>
    </a-modal>
  </div>
</template>
<script>
var rowKeys = [];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    rowKeys = selectedRows;
  }
};
import api from "@/api/api.js";
import UploadImg from "../../components/uploadImg.vue";
import { quillEditor } from "vue-quill-editor";
import { quillRedefine } from "vue-quill-editor-upload";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  components: {
    UploadImg
  },
  data() {
    return {
      modelTittle: "",
      dataTable: [],
      columns: [
        {
          title: "头像",
          dataIndex: "avatarUrl",
          align: "center",
          key: "avatarUrl",
          scopedSlots: { customRender: "avatarUrl" }
        },
        {
          title: "昵称",
          dataIndex: "nickName",
          align: "center"
        },
        {
          title: "性别",
          dataIndex: "sex",
          align: "center",
          customRender: function(text) {
            if (text == "1") {
              return "男";
            } else if (text == "2") {
              return "女";
            } else {
              return "信息未填写";
            }
          }
        },
        {
          title: "所在城市",
          dataIndex: "city",
          align: "center",
          scopedSlots: { customRender: "city" },
          customRender(val) {
            if (val == "") {
              return "信息未填写";
            } else {
              return val;
            }
          }
        },
        {
          title: "手机号码",
          dataIndex: "purePhoneNumber",
          align: "center"
        },

        {
          title: "语言偏好",
          dataIndex: "language",
          align: "center",
          customRender: function(text) {
            if (text == "1") {
              return "简体中文";
            } else if (text == "2") {
              return "繁体中文";
            } else if (text == "3") {
              return "英文";
            } else {
              return "信息未填写";
            }
          }
        },
        {
          title: "操作",
          key: "operation",
          dataIndex: "operation",
          align: "center",
          scopedSlots: { customRender: "operation" }
        }
      ],
      form: {
        size: 10, //每页条数
        page: 1 // 起始页
      },
      rowSelection, //表格复选框
      totalPage: 0,
      visibleDetails: false,
      plainOptions: [],
      value: [],
      userId: "",
      valueLabel: [],
      visibleImpor: false,
      radioImporValue: 1
    };
  },
  methods: {
    clickGetImpor(ype) {
      this.visibleImpor = true;
    },
    handleImpor() {
      let ids = "";
      if (this.radioImporValue == 1) {
        //勾选数据
        if (rowKeys.length == 0) {
          this.$message.info("请选择需要导出的数据");
          return;
        }
        rowKeys.forEach(e => {
          if (ids == "") {
            ids = e.userId;
          } else {
            ids = ids + "," + e.userId;
          }
        });
      } else {
        if (this.dataTable.length == 0) {
          this.$message.info("没有数据可以导出哦~");
          return;
        }
      }
      let path = api.HOST + "/user/exportUser?ids=" + ids;
      window.open(path);
    },
    showTags(row) {
      this.plainOptions = [];
      this.value = [];
      this.userId = row.userId;
      this.valueLabel = [];
      api.getPreferenceList({ userId: this.userId }).then(res => {
        if (res.code == 200) {
          res.result.forEach(el => {
            if (el.preference == 1) {
              this.valueLabel.push(el);
            }
          });
        }
      });
      this.visibleDetails = true;
    },
    offModel() {
      this.visibleDetails = false;
    },
    handleSubmit() {
      let obj = {
        userId: this.userId,
        labelIds: this.value.toString()
      };
      api.savePreference(obj).then(res => {
        if (res.code == 200) {
          this.$message.success("修改标签成功");
        } else {
          this.$message.error(res.description);
        }
      });
      this.visibleDetails = false;
    },
    cancel(e) {
      this.$message.error("取消!");
    },
    tableChange(pagination, filters, sorter) {
      this.form.page = pagination.current;
      this.getPlan();
    },
    getPlan() {
      api.getUserPage(this.form).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.totalPage = res.result.totalCount;
          // res.result.content.map(item => {
          //   if (item.city == "") {
          //     item.city = "没有内容";
          //   }
          // });
          this.dataTable = res.result.content;
        }
      });
    },
    delPlan(row) {
      api.delUser({ ids: row.userId }).then(res => {
        if (res.code == 200) {
          this.getPlan();
        }
      });
    },
    previewImage(file) {
      console.log(file);
      window.open(file.url);
    }
  },
  created() {
    this.getPlan();
  }
};
</script>

<style lang="scss" scoped="" type="text/css">
.editable-row-operations a {
  margin-right: 8px;
}
.top-btn {
  padding: 10px;
}
.code-img {
  display: block;
  width: 150px;
}
</style>
